/*
 * Copyright 2018 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

$navbar-inverse-bg: darken($gt-primary-color, 5%);
$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 5%);
$navbar-inverse-link-color: #fff;

.navbar-brand {
  font-size: 1.5rem;
  color: #fff !important;
  text-shadow: 0 0 4px white;
  font-weight: 700;
}

.gt-navbar .navbar-right {
  // this is needed to prevent wrapping if screen width small (but not small enough to trigger dropdown)
  flex-wrap: unset;
}

.gt-navbar .nav-link:hover {
  text-shadow: 0 0 4px #fff;
}

.gt-navbar .nav-link:focus, .gt-gears-btn:focus, .gt-navbar-toggler:focus {
  outline: 0;
}

.gt-navbar .nav-link.focus-visible, .gt-gears-btn.focus-visible, .gt-navbar-toggler.focus-visible {
  box-shadow: inset 0 0 0 0.15rem #9fbbc6;
}

.gt-gears-btn:hover {
  text-shadow: 0 0 10px #fff;
}

.gt-gears-btn, .gt-navbar-toggler {
  border: 0;
  background-color: transparent;
  cursor: pointer;
  height: 3rem;
}

.gt-gears-menu .dropdown-item {
  font-size: 1rem;
}

.gt-navbar {
  background-color: $navbar-inverse-bg;
  min-height: 3rem;
}

.gt-navbar .navbar-brand {
  display: flex;
}

.gt-navbar .nav-link, .gt-gears-btn, .gt-logout-btn {
  display: flex;
  align-items: center;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 600;
  @extend .px-md-3;
}

@include media-breakpoint-down(sm) {
  .gt-navbar .nav-link, .gt-gears-btn {
    // this is to better line up nav items under Glowroot
    margin-left: calc(-0.75rem + 2px);
    padding-left: 0.75rem;
  }
  .gt-gears-btn {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    margin-bottom: 0.25rem;
    width: 100%;
    text-align: left;
  }
  .gt-navbar .nav-link:focus, .gt-gears-btn:focus {
    box-shadow: 0 0 0 0.1rem $gt-blue;
  }
}

@include media-breakpoint-up(md) {
  .gt-navbar .nav-item.active, .gt-gears-li.active {
    background-color: $navbar-inverse-link-active-bg;
  }
  .gt-navbar .nav-link, .gt-gears-btn, .gt-logout-btn {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}
